<!--Header Start-->
<div class="doctitlemask"></div>
<i class="material-icons docback" style="font-size:27px;color:#5f5f5f;cursor: pointer;">arrow_back</i>
<p class="doctitle">Hi CQer!</p>
<!--Header End-->

<!--Body Start-->
<div class="docbody">
	<p class="doccontent">Hi! 亲爱的CQer!</p>
	<p class="doccontent">我不知道您是以哪种形式认识CQ Puzzle Maker（以下简称CQPM）的。希望你在阅读本篇时对CQPM已经有所了解。在本篇中，我会大致介绍整个编辑器的布局特点、CQPM的工作流程以及一些废话。<img src="face/doge_thumb.gif" height="22px" style="margin-bottom: -2px;" /></p>

	<p class="docsubtitle">一、CQPM的界面</p>
	<p class="doccontent">       emmm...希望CQPM的界面没有给你很大的压力（至少我自己看来还是可以哒）</p>
	<p class="doccontent">       编辑器中间面积最大的是拼图编辑区，所有的拼图操作都将在此区域进行。此区域的右下角是界面的调整按钮。</p>
	<p class="doccontent">       在编辑器的左侧，是 拼图工具栏，你可以将需要的拼图从中拖动到编辑器的拼图编辑区。将鼠标长时间停留在某个拼图上，会出现该拼图的简单介绍。</p>
	<p class="doccontent">       编辑器右上角是 菜单组，常用的操作按钮都集成在此区域内，集合了一些基本操作。每个按钮的作用将在「基本操作」章节讲到。</p>

	<p class="docsubtitle">二、CQPM的基本操作</p>
	<p class="doccontent">       CQPM编辑器提供了十分便捷的代码编辑方式。目前，你能够通过本编辑器，来自定义 酷Q应用:“Puzzle Plugin” 的功能。多插件机制在努力开发中，敬请期待。</p>
	<p class="doccontent">    ①拼图工具栏：<br />       拼图工具栏的唯一用途就是让你将需要的拼图加入到编辑区中。拼图工具栏有多个分类(如“逻辑” “循环” “CQ事件”)，单击每个分类，将会出现该分类下的所有拼图。使用鼠标将需要的拼图拖动到拼图编辑区即可。</p>
	<p class="doccontent">    ②拼图编辑区：<br />       所有的拼图操作都在此区域进行。首先，每个拼图都有自己的槽口，你需要做的就是理清逻辑关系，将需要的拼图通过槽口连接到一起，从而形成一段完整的代码。<br />       在拼图(或空白处)右键来调出右键菜单，你可以通过菜单来对某拼图(或整个编辑区)进行操作，比如(“注释块” “禁用块” “删除块”)<br />       该区域右下角是布局调整按钮以及垃圾箱。你能够通过布局调整按钮放大、缩小以及居中编辑区，将拼图(或拼图组)拖动到垃圾箱上方可快速删除拼图。</p>
	<p class="doccontent">    ③拼图工具栏：<br />       拼图工具栏的唯一用途就是让你将需要的拼图加入到编辑区中。拼图工具栏有多个分类(如“逻辑” “循环” “CQ事件”)，单击每个分类，将会出现该分类下的所有拼图。使用鼠标将需要的拼图拖动到拼图编辑区即可。鼠标停留在某块拼图上来查看拼图作用。</p>
	<p class="doccontent">    ④菜单组：<br />       菜单组里有一些基本的操作按钮，下面将一一介绍。<br />       <i class="material-icons" style="font-size:22px;color:#5f5f5f;border:2px solid #5f5f5f;border-radius:10px;">live_help</i> : 点击来调出/隐藏帮助文档<br />       <i class="material-icons" style="font-size:22px;color:#5f5f5f;border:2px solid #5f5f5f;border-radius:10px;">cloud_upload</i> : 点击后会生成一段唯一的项目数字码，将数字码输入酷Q插件即可完成插件功能定义<br />       <i class="material-icons" style="font-size:22px;color:#5f5f5f;border:2px solid #5f5f5f;border-radius:10px;">publish</i> : 将一个拼图布局文件追加到目前布局的后面（不清除当前已有拼图）<br />       <i class="material-icons" style="font-size:22px;color:#5f5f5f;border:2px solid #5f5f5f;border-radius:10px;">file_upload</i> : 将一个拼图布局文件导入到拼图编辑器（将覆盖编辑区的拼图）<br />       <i class="material-icons" style="font-size:22px;color:#5f5f5f;border:2px solid #5f5f5f;border-radius:10px;">save</i> : 将目前编辑区的拼图布局导出为文件，方便分享代码以及备份代码。<br />       <i class="material-icons" style="font-size:22px;color:#5f5f5f;border:2px solid #5f5f5f;border-radius:10px;">sd_card</i> : 将目前编辑区的拼图布局储存到浏览器缓存中（缓存不会因为浏览器关闭而消失）。暂时离开电脑或关闭浏览器时，要记得点击该按钮，避免当浏览器崩溃时功归一篑。但是请注意，本功能只能作为暂时储存，如果想要备份/长时间保存，请使用 导出到本地文件 的功能，浏览器缓存可能会因为升级浏览器/清理垃圾而丢失。</p>

	<p class="docsubtitle">三、引用</p>
	<p class="doccontent">      ● Google Blockly<br />      ● JQuery<br />      ● mCustomScrollbar.js<br />      ● ba-resize.js<br />      ● lobibox.js</p>

	<p class="docsubtitle">四、玩的愉快</p>
</div>

<!--Body End-->

<!--Footer Start-->
<hr class="docend" />
<!--Footer End-->
